const iframeParentDom = document.getElementById("routerViewContainer");

const setURLInView = (url) => {
  const LastIframeDom = iframeParentDom.querySelector("iframe");
  const LastRouterButtonDOM = iframeParentDom.querySelector("div");

  // If iframe exists, remove it
  if (LastIframeDom) {
    iframeParentDom.removeChild(LastIframeDom);
  }
  if (LastRouterButtonDOM) {
    iframeParentDom.removeChild(LastRouterButtonDOM);
  }

  const iframeViewDom = document.createElement("iframe");
  iframeViewDom.style.width = "100%";
  iframeViewDom.style.height = "100%";
  iframeViewDom.src = url;
  iframeViewDom.style.borderRadius = "20px";
  iframeParentDom.appendChild(iframeViewDom);

  const originURLButton = document.createElement("div");
  originURLButton.innerText = "全屏演示地址";
  originURLButton.style.position = "absolute";
  originURLButton.style.right = "0%";
  originURLButton.style.bottom = "0%";
  // originURLButton.style.margin = '20px';
  originURLButton.style.padding = "10px 20px";
  originURLButton.style.font_size = "16px";
  originURLButton.style.backgroundColor =
    "rgba(255, 255, 255, 0.04)"; /* 半透明背景颜色 */
  originURLButton.style.backdropFilter = "blur(50px)";
  originURLButton.style.webkitBackdropFilter = "blur(50px)";
  originURLButton.style.color = "white";
  originURLButton.style.border = "none";
  originURLButton.style.borderRadius = "20px"; /* 设置圆角 */
  originURLButton.style.cursor = "pointer";
  originURLButton.style.transition = "background-color 0.3s"; /* 添加渐变效果 */
  originURLButton.style.border = "2px solid  rgb(255,255,255,0.3)";
  // originURLButton.style.boxShadow = ' 2px 2px 4px rgb(255,255,255,0.8)'; /* 描边效果 */
  originURLButton.onclick = () => {
    window.location.href = url;
  };
  iframeParentDom.appendChild(originURLButton);
};

window.setURLInView = setURLInView;

window.onload = () => {
  setURLInView("./demo/example1/index.html");
};

// iframeDom.src = '/demo/example1/index.html';

// const changeIframe
